<template>
	<view>
		<view class="w-full text-center">
			<text class="">个人信息</text>
		</view>
		<view class="p-4">
			<view>
				<uv-form ref="formRef" :model="entity" :rules="rules" labelPosition="left" labelWidth="5rem">
					<uv-form-item label="用户名" prop="username" borderBottom>
						<uv-input v-model="entity.username" border="none" readonly>
						</uv-input>
					</uv-form-item>
					<uv-form-item label="昵称" prop="nickname" borderBottom>
						<uv-input v-model="entity.nickname" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="手机号" prop="phone" borderBottom>
						<uv-input v-model="entity.phone" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="邮箱" prop="email" borderBottom>
						<uv-input v-model="entity.email" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="真实姓名" prop="realName" borderBottom>
						<uv-input v-model="entity.realName" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="生日" prop="birthday" borderBottom>

						<uv-input v-model="entity.birthday" readonly border="none">
							<template #suffix>
								<uv-icon name="calendar" size="24" @click="showDatePicker"></uv-icon>
							</template>
						</uv-input>
					</uv-form-item>
					<view>
						<uv-calendars ref="calendars" :date="datePickerValue" @confirm="updateBirthday"></uv-calendars>
					</view>
					<uv-form-item label="个人介绍" prop="introduce" borderBottom>
						<uv-textarea v-model="entity.introduce" placeholder="请输入内容" border="none" count
							maxlength="100"></uv-textarea>
					</uv-form-item>
					<view class="my-2 w-full">
						<uv-button type="primary" text="保存" @click="save"></uv-button>
					</view>
					<view class="my-2 w-full">
						<uv-button text="修改密码" @click="changePassword"></uv-button>
					</view>
					<view class="my-2 w-full">
						<uv-button text="退出登录" @click="logout"></uv-button>
					</view>
				</uv-form>
			</view>
		</view>
		<view>
			<uv-notify ref="notify"></uv-notify>
		</view>
	</view>
</template>

<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, getCurrentInstance } from 'vue';
import authService from "@/services/auth.service";
import personalCenterService from '@/services/personal-center.service';
import { REGEX_PASSWORD, REGEX_EMAIL, REGEX_PHONE } from "@/utils/regexes";
import { UNI_STORAGE_KEY_TOKEN, UNI_STORAGE_KEY_USER_PROFILE } from '@/utils/constants';
// 直接import dayjs from 'dayjs'报错，故使用如下引用方式
import dayjs from 'dayjs/dayjs.min';
import { onShow } from "@dcloudio/uni-app";

const entity = ref({
	username: '',
	phone: '',
	email: '',
	verifyCode: '',
});
const formRef = ref();
const loading = ref(false);

const notify = ref();
const notifyConfig = ref({
	text: '',
	type: '',
});

const rules = reactive({});

const calendars = ref();
const datePickerValue = ref();

onShow(async () => {
	load();
});

const load = async () => {
	try {
		const profile = await personalCenterService.retrieve();
		uni.setStorageSync(UNI_STORAGE_KEY_USER_PROFILE, profile);
		entity.value = {
			...profile.user
		};
		if (entity.value && entity.value.birthday) {
			const date = dayjs(entity.value.birthday);
			datePickerValue.value = date.format("YYYY-MM-DD");
		}
	} catch (err) {
		if (err.data && err.data.message) {
			showError(err.data && err.data.message);
		}
		throw err;
	} finally {
	}
}

const showNotify = (config) => {
	notifyConfig.value = config;
	notify.value.show({
		type: config.type,
		message: config.message,
	});
}

const showError = (message) => {
	showNotify({ message: message, type: "error" });
}

const changePassword = async () => {
	uni.navigateTo({
		url: "/pages/personal-center/change-password/change-password",
	})
};

const save = async () => {
	const formEl = formRef.value;
	loading.value = true;
	if (!formEl) {
		loading.value = false;
		return;
	}
	try {
		await formEl.validate();

		const res = await personalCenterService.update(entity.value);
		showNotify({ message: "保存成功", type: "success" });
	} catch (err) {
		if (err.data && err.data.message) {
			showError(err.data && err.data.message);
		}
		throw err;
	} finally {
		loading.value = false;
	}
}

const logout = async () => {
	try {
		// 后端注销token
		await authService.logout();
	} catch (err) {
		if (err.data && err.data.message) {
			showError(err.data && err.data.message);
		}
		throw err;
	} finally {
		frontLogout();
	}
};

const frontLogout = () => {
	// 前端取消授权
	uni.removeStorageSync(UNI_STORAGE_KEY_USER_PROFILE);
	uni.removeStorageSync(UNI_STORAGE_KEY_TOKEN);
	// 跳转至主页
	uni.switchTab({
		url: "/pages/home/home",
	});
}

const showDatePicker = () => {
	calendars.value.open();
}

const updateBirthday = (value) => {
	datePickerValue.value = value.fulldate;
	const date = dayjs(datePickerValue.value);
	entity.value.birthday = date.format("YYYY-MM-DD");
}
</script>

<style lang="scss"></style>
